<template>
  <view class="gui-header-leader gui-flex gui-row gui-nowrap gui-align-items-center">
    <view
      v-if="home"
      class="gui-header-leader-btns"
      hover-class="gui-tap"
      :style="{
        opacity: show ? 1 : 0,
      }"
    >
      <text class="gui-header-leader-btns gui-block gui-icons" :class="homeButtonClass" @tap="goHome">&#xe655;</text>
    </view>
    <view
      v-if="back"
      class="gui-header-leader-btns"
      hover-class="gui-tap"
      :style="{
        opacity: show ? 1 : 0,
      }"
    >
      <text class="gui-header-leader-btns gui-block gui-icons" :class="backButtonClass" style="font-size: 44rpx" @tap="goBack">
        &#xe600;
      </text>
    </view>
    <slot></slot>
  </view>
</template>
<script>
export default {
  name: 'GuiHeaderLeading',
  props: {
    back: { type: Boolean, default: true },
    home: { type: Boolean, default: true },
    backButtonClass: {
      type: Array,
      default: function () {
        return ['gui-primary-text']
      },
    },
    homeButtonClass: {
      type: Array,
      default: function () {
        return ['gui-primary-text']
      },
    },
  },
  emits: ['goBack', 'goHome'],
  data() {
    return {
      show: true,
    }
  },
  mounted: function () {
    // #ifdef MP-ALIPAY
    this.show = false
    // #endif
    // #ifdef MP-BAIDU
    this.show = false
    // #endif
    // #ifdef MP-JD
    this.show = false
    // #endif
  },
  methods: {
    goBack: function () {
      uni.navigateBack({ delta: 1 })
      this.$emit('goBack')
    },
    goHome: function () {
      this.$emit('goHome')
    },
  },
}
</script>
<style scoped>
.gui-header-leader {
  height: 55rpx;
  border-radius: 55rpx;
  font-weight: bold;
  margin-left: 20rpx;
  overflow: hidden;
}
.gui-header-leader-btns {
  width: 50rpx;
  line-height: 50rpx;
  font-size: 40rpx;
  margin: 0rpx;
  overflow: hidden;
}
</style>
